<template>
  <div class="tab-title-page goods_list">
    <div class="common_form_search">
      <el-form ref="searchForm" :inline="true" :model="searchForm">
        <el-form-item label="订单号">
          <el-input
            v-model="searchForm.order_no"
            placeholder="请输入订单号"
            clearable
          />
        </el-form-item>
        <el-form-item label="供应商名称">
          <el-input
            v-model="searchForm.shop_name"
            placeholder="请输入供应商"
            clearable
          />
        </el-form-item>

        <el-form-item label="支付方式">
          <el-select
            v-model="searchForm.pay_type"
            placeholder="全部"
            clearable
          >
            <el-option label="预授权代扣" value="2" />
            <el-option label="花呗分期" value="3" />
            <el-option label="主动支付" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="申请时间">
          <my-date-picker ref="myDatePicker" />
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="search()">查询</el-button>
          <el-button size="small" @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-tabs
      v-model="activeName"
      class="flex-1 nav_tabs"
      @tab-click="handleClick"
    >
      <el-tab-pane :label="`待审核(${count.no_check})`" name="3" />
      <el-tab-pane :label="`已审核(${count.checked})`" name="6" />
      <el-tab-pane
        :label="`拒绝审核(${count.check_refuse})`"
        name="5"
      />
    </el-tabs>
    <el-divider class="middle_divider" />
    <div class="child_page">
      <div class="flex align-center table-top-btns">
        <h5 class="flex align-center">
          <svg-icon
            style="margin-right: 15px"
            icon-class="list"
            :size="15"
          />数据列表
        </h5>
        <!-- <el-button type="warning" icon="el-icon-upload2" size="small" plain
          >导出</el-button> -->
      </div>
      <el-table v-show="tableData.length > -1" :data="tableData" border>
        <el-table-column
          fixed="left"
          align="center"
          prop="order_id"
          label="ID"
          width="80"
        />
        <el-table-column fixed="left" label="订单编号" width="200">
          <template slot-scope="scope">
            <el-link
              type="primary"
              :underline="false"
              @click="jumpOrder(scope.row.trade_no)"
            >
              <div>{{ scope.row.trade_no }}</div>
              <div>({{ scope.row.order_type }})</div>
            </el-link>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="pay_type"
          label="支付方式"
          width="120"
        />
        <el-table-column align="center" label="租期" width="90">
          <template slot-scope="scope">
            <span v-if="scope.row.month_total">{{ scope.row.month_total }}期</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="租期金额" width="110">
          <template slot-scope="scope">
            <span v-if="scope.row.rent_total">￥{{ scope.row.rent_total }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="shopname"
          label="供应商名称"
          width="110"
        />
        <el-table-column align="center" label="用户已付金额" width="110">
          <template slot-scope="scope">
            <span v-if="scope.row.paid_total_rent">￥{{ scope.row.paid_total_rent }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="退款金额" width="110">
          <template slot-scope="scope">
            <span v-if="scope.row.refund_amount">￥{{ scope.row.refund_amount }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="结算总金额" width="110">
          <template slot-scope="scope">
            <span v-if="scope.row.settle_amount">￥{{ scope.row.settle_amount }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="应补足手续费" width="120">
          <template slot-scope="scope">
            <span
              v-if="scope.row.deduct_amount"
            >￥{{ scope.row.deduct_amount }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="应补足退款金额" width="120">
          <template slot-scope="scope">
            <span
              v-if="scope.row.deduct_amount"
            >￥{{ scope.row.deduct_amount }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="需补足总额" width="120">
          <template slot-scope="scope">
            <span
              v-if="scope.row.deduct_amount"
              class="red-font"
            >￥{{ scope.row.deduct_amount }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="order_status"
          label="订单状态"
          width="100"
        />
        <el-table-column
          align="center"
          label="审核状态"
          width="120"
        >
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.refund_status_name"
              :type="scope.row.refund_status == 6 ? 'success': scope.row.refund_status == 5 ? 'danger' : 'warning' "
            >
              {{ scope.row.refund_status_name }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="create_time"
          label="申请时间"
          width="100"
        />
        <el-table-column fixed="right" align="center" label="操作" width="280">
          <template slot-scope="scope">
            <el-button
              v-if="$hasMethod('#agree') && scope.row.refund_status == 3 "
              type="warning"
              size="mini"
              @click="agree(scope.row)"
            >同意退款</el-button>
            <el-button
              v-if="$hasMethod('#refuse') && scope.row.refund_status == 3 "
              type="danger"
              size="mini"
              @click="refuse(scope.row.lease_id)"
            >拒绝退款</el-button>
            <el-button
              type="primary"
              size="mini"
              @click="checkDetails(scope.row.order_id)"
            >查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <custom-page
        ref="customPage"
        :total="total"
        @getList="getList"
      />
    </div>
    <agree-refund ref="agreeRefund" :refund-id="currentId" :order-id="orderId" />
    <refuse-refund ref="refuseRefund" :refund-id="currentId" />
    <el-dialog
      title="撤销"
      :visible.sync="repealVisible"
      width="30%"
      center
      class="dialog"
    >
      <span>确定要撤销拒绝吗?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="repealVisible = false">取 消</el-button>
        <el-button type="primary" @click="repealRefused">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { orderRefundCheckList, cancelRefuseSettle } from '@/api/finance'
import customPage from '@/components/customPage'
import myDatePicker from '@/components/myDatePicker'
import agreeRefund from './dialog/agreeRefund.vue'
import refuseRefund from './dialog/refuseRefund.vue'
export default {
  components: { customPage, myDatePicker, agreeRefund, refuseRefund },
  data() {
    return {
      searchForm: {
        order_no: '',
        shop_name: '',
        pay_type: '',
        create_time: ''
      },
      activeName: '3',
      currentId: '',
      orderId: '',
      count: {
        no_check: 0,
        checked: 0,
        check_refuse: 0
      },
      total: 0,
      tableData: [],
      repealVisible: false
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 通过
    agree(row) {
      this.currentId = row.id
      this.orderId = row.order_id
      this.$refs.agreeRefund.dialogVisible = true
      this.$refs.agreeRefund.isSuccess = true
    },
    // 拒绝
    refuse(id) {
      this.currentId = id
      this.$refs.refuseRefund.dialogVisible = true
    },
    checkDetails(id) {
      this.currentId = id
      this.$router.push({ name: 'financeRefundDetail', params: { id }})
      // this.repealVisible = true;
    },
    repealRefused() {
      cancelRefuseSettle(this.currentId).then((res) => {
        this.repealVisible = false
      })
    },
    jumpOrder(orderId) {
      this.$router.push({ name: 'orderList', params: { orderId }})
    },
    // 获取数据
    getList(flag) {
      // flag为true, 则不刷新表格
      const { page, pageSize } = this.$refs.customPage
      if (!flag) {
        this.tableData = []
      }
      orderRefundCheckList({
        page,
        pageSize,
        ...this.searchForm,
        refund_status: this.activeName
      }).then((res) => {
        this.tableData = res.data || []
        this.total = res.total
        for (const key in this.count) {
          this.count[key] = res.count[key]
        }
      })
    },
    // 查询
    search() {
      const pickerVal = this.$refs.myDatePicker.getVal()
      if (pickerVal !== 'error') {
        this.searchForm.create_time = pickerVal
        this.$refs.customPage.page = 1
        this.getList()
      }
    },
    // 重置
    reset() {
      if (this.$refs.myDatePicker) {
        this.$refs.myDatePicker.reset()
      }
      this.searchForm = {
        order_no: '',
        shop_name: '',
        pay_type: '',
        create_time: ''
      }
      this.getList()
    },
    handleClick(tab) {
      this.activeName = tab.name
      this.$refs.customPage.page = 1
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.el-button--warning.is-plain {
  color: #ff9f38;
  background: #fff;
  border-color: #ff9f38;
}
.el-icon-upload2 {
  font-size: 18px;
}
.dialog {
  text-align: center;
}
.goods_info {
  .info {
    margin-left: 10px;
    p {
      color: #666666;
    }
    p:first-child {
      color: #999999;
    }
  }
}
.activity {
  line-height: 24px;
  span {
    width: 20px;
    height: 20px;
    margin-left: 10px;
  }
}
.child_page {
  padding: 30px;
}
.common_form_search {
  padding-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  background-color: #ffffff;
  border-bottom: 1px solid #eeeeee;
}
</style>
